<template lang="pug">
  .scene(
    :class="{'no-tab': !showSceneGroup, 'animated bounceInUp': showScene}",
    :style="{bottom: !getBottomMenuLenth && getThemeId == 2 && !showTouch ? '0' : '60px'}",
    v-show="showScene",
    @dblclick="handleToggleScene")
    Scroll.scene-wrap(v-if="getSceneList", :data="getSceneList", :scrollX="true", ref="scrollSceneWrap")
      ul.scene-list(ref="sceneListWrap")
        el-tooltip(
          v-for="(item, index) in getSceneList",
          :key="index",
          effect="dark",
          :content="item.dec",
          :disabled="item.dec ? false : true",
          placement="top")
          li.scene-list-item(
            ref="sceneItem",
            :style="[getComsumerStyle, sceneIndex == index ? getBdColorStyle : '']",
            :class="['item', {'active': sceneIndex == index && !item.isLock}]",
            @click="handleSceneSwitch(item, index, true)"
            @mouseover="checkScrollText(index)",
            @mouseout="cleanScrollText(index)")
            i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
            .lock(v-if="item.isLock")
              i.iconfont &#xe6f0;
            .img-box
              img(:style="getComsumerStyle", :src="item.full_thumb_url", alt="")
            .text.omit(:style="sceneIndex == index ? getColorStyle : ''")
              p(ref='text') {{item.title}}

    .group-wrap(v-if="getSceneGroup && showSceneGroup")
      ul.scene-group.scene-group-b(
        v-if="getSceneGroup"
        v-scroll.x=''
        :style="`width: ${getPcWidth}px;`")
        li.scene-group-item.pos-r(
          :key="index",
          :title="group.album",
          v-for="(group, index) in getSceneGroup",
          @click="handleGroupSwitch(group.groupid, index)")
          .rotate-bor
          .img-box(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getBdColorStyle : ''")
            img(:src="group.scenelist[0].full_thumb_url", alt="")
          p.text.omit.pos-a(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getColorStyle : ''") {{group.album}}

    //- Scroll.group-wrap(v-if="getSceneGroup && showSceneGroup", :data="getSceneGroup", :scrollX="true", ref="scrollGroupWrap")
    //-   .scene-group.scene-group-b(
    //-     ref="sceneGroupWrap")
    //-     .scene-group-item(
    //-       ref="sceneGroupItem",
    //-       v-for="(group, index) in getSceneGroup",
    //-       :key="index",
    //-       :title="group.album",
    //-       @click="handleGroupSwitch(group.groupid, index)")
    //-       .rotate-bor
    //-       .img-box(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getBdColorStyle : ''")
    //-         img(:src="group.scenelist[0].full_thumb_url", alt="")
    //-       p.text.omit.pos-a(:class="{'active': sceneGroupIndex == index}", :style="sceneGroupIndex == index ? getColorStyle : ''") {{group.album}}
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  },
  data() {
    return {
      showTouch: $globalconfig.MODULES.TOUCH_BUTTON,
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'

.theme-pc-b
  .scene
    position: absolute
    // bottom: 60px
    left: 0
    right: 0
    z-index: 10
    .scene-wrap
      .scene-list
        .scene-list-item
          .img-box
            border-radius 0
            img
              border-radius 0

// 旧模板独有样式
.theme-pc-a, .theme-pc-b, .theme-pc-c, .theme-pc-d
  .scene-wrap
    height: 80px

    .scene-list
      height: 80px

      .scene-list-item
        position: relative
        width: 80px
        height: 80px
        border 2px solid #ffffff
        border-width 2px !important
        & > .lock
          line-height: 80px

.theme-pc
  .scene
    text-align: center

    .scene-wrap
      .scene-list
        .scene-list-item
          position: relative
          border-radius: 0px
          &.active
            border 2px solid #58b7ff
          .text
            position: absolute
            background-color: rgba($black, 0.4)
            height: 20px
            line-height: 20px
            box-sizing: border-box

    .scene-group.scene-group-b
      height: 84px

      .scene-group-item
        display: inline-block
        width: 74px
        height: 74px
        box-shadow: none
        border none
        position relative
        margin-right 15px
        .rotate-bor
          width 100%
          height 100%
          position absolute
          z-index 2
          border 2px solid #ffffff
          transform-origin center
          transform rotate(-7deg)
        .img-box
          position absolute
          z-index 3
          border 2px solid #ffffff
          border-width 2px !important
          &.active
            border 2px solid #58b7ff
        .text
          padding: 2px
          height: 15px
          line-height: 15px
          font-size: 10px
          background-color: rgba($black,.5)
          position absolute
          left 2px
          bottom -1px
          width calc(100% - 4px)
          &.active
            color #58b7ff

    // 无分组
    .no-tab
      .scene-group
        height: auto

</style>
<style lang="stylus" scoped>
.theme-pc-b
  .foot-menu
    .scene
      .scene-wrap
        .scene-list
          .scene-list-item
            border-radius 0
</style>
